<template>
  <view class="cost-adjustment-detail-page">
    <image class="page-bg" src="/static/images/bg.png" mode="aspectFill" />
    <view class="gradient-bg" :style="{ top: navBarHeight + 'px' }"></view>
    <CustomNavbar title="费用调整详单" />
    
    <view class="page-content" :style="{ paddingTop: navBarHeight + 'px' }">
      <!-- 本机号码 -->
      <view class="phone-info">
        <text class="phone-number">本机号码:{{ phoneNumber }}</text>
      </view>
      
      <!-- 费用调整合计卡片 -->
      <view class="summary-card">
        <image class="bg-image" src="/static/images/bg3.png" mode="aspectFill" />
        <view class="summary-cards-wrapper">
          <text class="card-title">本月费用调整合计(元)</text>
          <text class="card-value">{{ totalVoiceFee}}</text>
        </view>
        
      </view>

      <!-- 变动明细 -->
      <view class="detail-section">
        <!-- <view class="section-header">
          <view class="section-line"></view>
          <text class="section-title">变动明细</text>
        </view> -->
        <view class="detail-list">
          <view 
            class="detail-item" 
            v-for="(item, index) in detailList" 
            :key="index"
          >
            <!-- <view class="item-icon-wrapper">
              <view class="item-icon">
                <image src="/src/static/icons/icon-zhichu.png" alt=""/>
              </view>
            </view> -->
            <view class="item-content">
              <text class="item-type"> 费用调整</text>
              <text class="item-time">{{ (item.stateDate.substring(0,4)+"年"+item.stateDate.substring(4,6)+"月"+item.stateDate.substring(6,8)+"日") }}</text>
            </view>
            <text class="item-amount">{{ Number(item.adjustAmount.match(/-(\S*)/)[1]).toFixed(2) }}元</text>
          </view>
        </view>
      </view>


    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import CustomNavbar from '@/components/CustomNavbar.vue'

const navBarHeight = ref(88)
const phoneNumber = ref('189*****0691')
const totalAmount = ref('0.00')
const detailList = ref([])

const totalVoiceFee = ref(0.00)

onLoad((options) => {
  // 接收从记录页面传递过来的月份参数
  if (options.content) {
    detailList.value = JSON.parse(decodeURIComponent(options.content))
    console.log('接收到的参数:', JSON.stringify(detailList.value))

    detailList.value.forEach(item => {
      var adjustAmount = Number(item.adjustAmount.match(/-(\S*)/)[1]);
      totalVoiceFee.value += Number(adjustAmount);
    })

    totalVoiceFee.value = Number(totalVoiceFee.value).toFixed(2);
    
  }
})

onMounted(() => {
  const windowInfo = uni.getWindowInfo()
  const statusBarHeight = windowInfo.statusBarHeight || 0
  navBarHeight.value = statusBarHeight + 44
  
  // 这里可以添加获取费用调整详单数据的逻辑
  // getCostAdjustmentDetail()
})

// const getCostAdjustmentDetail = async () => {
//   // 获取费用调整详单数据
//   // 可以使用 selectedMonth.value 来获取对应月份的数据
// }
</script>

<style scoped>
.cost-adjustment-detail-page {
   
  position: relative;
  z-index: 1;
}

.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  object-fit: cover;
}

.gradient-bg {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.4);
}

.page-content {
  position: relative;
  z-index: 2;
  padding: 40rpx 32rpx;
  padding-bottom: 40rpx;
}

/* 变动明细 */
.detail-section {
  margin-bottom: 40rpx;
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.detail-item {
  background: rgba(255, 255, 255, 1);
  box-shadow: 0px 8rpx 8rpx 0px rgba(125, 182, 251, 0.1);
  border-radius: 16rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.item-icon-wrapper {
  flex-shrink: 0;
}

.item-icon {
  width: 64rpx;
  height: 64rpx;
  background: rgba(135, 206, 250, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-right: 16rpx;
}
.item-icon image{
  width: 100%;
  height: 100%;
}

.icon-house {
  font-size: 36rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 8rpx; */
}

.item-type {
  color: rgba(51, 51, 51, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
}

.item-time {
  color: rgba(153, 153, 153, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 24rpx;
  font-weight: 400;
  line-height: 28rpx;
}

.item-amount {
  color: rgba(255, 162, 56, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 38rpx;
  flex-shrink: 0;
}

/* 本机号码 */
.phone-info {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
}

.phone-number {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 32rpx;
  font-weight: 700;
  line-height: 38rpx;
}

/* 费用调整合计卡片 */
/* .summary-card {
  background: rgba(78, 138, 254, 1);
  border-radius: 16rpx;
  padding: 48rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0px 8rpx 16rpx rgba(78, 138, 254, 0.3);
  margin-top: 40rpx;
} */

.card-title {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 28rpx;
  font-weight: 400;
  line-height: 32rpx;
  margin-bottom: 16rpx;
  opacity: 0.9;
}

.card-value {
  color: rgba(255, 255, 255, 1);
  font-family: HarmonyOS Sans SC;
  font-size: 56rpx;
  font-weight: 700;
  line-height: 66rpx;
}
.summary-card {
  display: flex;
  align-items: center;
  flex-direction: column;
  z-index: 2;
  margin-bottom: 32rpx;
}
.bg-image {
   width: 670rpx;
  height: 158rpx;
}
.summary-cards-wrapper{
  margin-top: 24rpx;
 position: absolute; 
 display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
}
.summary-card {
  border-radius: 16rpx;
  /* padding: 32rpx 100rpx; */
  flex-direction: column;
  display: flex;
  align-items: center;
}
</style>

